<template>
	<view class="m-res">
		<view v-for="(item,index) in getListData" :key="index">
			<view class="_label_top">
				<image class="_btn_top" src="../../static/img/kjg.png"></image>
				<label class="_lab_top">{{item.title}}的数字</label>
				<label class="_ar">{{item.numArr}}</label>
			</view>
			
			<view class="_content">
				<label>{{item.ititle}}卡牌故事</label>
				<!-- 简单解读 -->
				<rich-text :nodes="item.descript"></rich-text>
			</view>
			<view class="_content">
				<!-- 卡牌画面 -->
				<label>{{item.ititle}}的卡牌画面</label>
				<label>卡牌画面</label>
				<image :src="item.thumb" v-if="item.group==1 || item.group == 2"></image>
				<image :src="item.thumb" v-if="item.group==3 && m32lock==1"></image>
				<rich-text :nodes="item.card_descript"  v-if="item.group==1 || item.group == 2"></rich-text>
				<rich-text :nodes="item.card_descript"  v-if="item.group==3 && m32lock==1"></rich-text>
				<mBtn class="_lbtn" :text="bottonText"   v-if=" m32lock != 1 && item.group==3 && nopay==false"/>
				<mBtn class="_lbtn" :text="bottonText"   @tap="tapUnlock(item.ititle,item.numArr,2,item.group)"  v-if=" m32lock != 1 && item.group==3 && nopay==true"/>
			</view>
			<view class="_content">
				<label>{{item.ititle}}的状况解读</label>
				<!-- 详细解读 -->
				<rich-text :nodes="item.content"  v-if="item.group==1"></rich-text>
				<rich-text :nodes="item.content"  v-if="item.group==2 && m23lock==1"></rich-text>
				<mBtn class="_lbtn" :text="bottonText"    v-if="item.group==2 && m23lock != 1 && nopay==false"/>
				<mBtn class="_lbtn" :text="bottonText"  @tap="tapUnlock(item.ititle,item.numArr,2,item.group)"  v-if="item.group==2 && m23lock != 1 && nopay==true"/>
				<rich-text :nodes="item.content"  v-if="item.group==3 && m33lock==1"></rich-text>
				<mBtn class="_lbtn" :text="bottonText"    v-if="item.group==3 && m33lock != 1 && nopay==false"/>
				<mBtn class="_lbtn" :text="bottonText"  @tap="tapUnlock(item.ititle,item.numArr,3,item.group)"  v-if="item.group==3 && m33lock != 1 && nopay==true"/>
				<mBtnCs class="_lbtn" text="转发结果图"  @tap="share(item.thumb)"/>
			</view>
		</view>
	</view>
</template>

<script>
	import mBtnCs from '@/components/m-btn/m-btn-res-type.vue'
	import mBtn from '@/components/m-btn/m-btn-res-type-red.vue'
	import comm from '../../common/helpers.js'
	export default {
		name:'m-res',
		components:{mBtnCs,mBtn},
		props:{
			listData:{
				type:Array,
				default:()=>{
					return [
						{
							'title':'过去的数字',
							'content':'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询',
							'descript':'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询',
							'numArr':'1 1 3',
							'ititle':'现在的状况解读',
							'islock_two':0,
							'islock_three':0,
							'thumb':'../../static/img/qrcode.png',
							'group':1
						},
						{
							'title':'现在的数字',
							'content':'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询',
							'descript':'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询',
							'numArr':'1 1 3',
							'ititle':'现在的状况解读',
							'islock_two':0,
							'islock_three':1,
							'thumb':'../../static/img/qrcode.png',
							'group':2
						},
						{
							'title':'未来的数字',
							'content':'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询',
							'descript':'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询',
							'numArr':'1 1 3',
							'ititle':'现在的状况解读',
							'islock_two':1,
							'islock_three':1,
							'thumb':'../../static/img/qrcode.png',
							'group':3
						}
					]
				}
			},
			listIt:{
				type:Array,
				default:()=>{
					return [
						{
							'narr':'112'
						},
						{
							'narr':'113'
						},
						{
							'narr':'114'
						}
					]
				}
			},
			bottonText:{
				type:String,
				default:'购买显示全部内容'
			},
			nopay:{
				type:Boolean,
				default:false
			},
			m23lock:{
				type:Number,
				default:0
			},
			m32lock:{
				type:Number,
				default:0
			},
			m33lock:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				oid:''
			};
		},
		onLoad(e) {
			
		},
		computed:{
			getListData(){
				return this.listData[0]
			}
		},
		methods:{
			/**
			 * 生成订单并且跳转到只服务页面
			 * @param {Object} tit
			 * @param {Object} narr
			 */
			tapUnlock(tit,narr,mo,index){
				let that = this
				let type = uni.getStorageSync('type')
				let rule = uni.getStorageSync('rule')
				that.$emit('click',{
					//代表占卜中小分类，比如“爱情”
					'rule':rule,
					// 代表所属分类
					'id':type,
					// 代表用户openid
					'mid':that.oid,
					//代表数字组合
					'goods_id':narr,
					// 代表当前模块下的第几个模块
					'mo':mo,
					//大分类
					'rmod':index
				})
			},
			share(_thumb){
				this.$emit('share',{
					'thumb':_thumb
				})
			}
		}
	}
</script>

<style lang="scss">
	.m-res{
		width:81%;
		height: auto;
		margin:auto;
		position:relative;
		margin-top:25upx;
		margin-bottom: 65upx;
		color: white;
		z-index:10;
		
		._label_top{
			height: auto;
			margin-bottom: 65upx;
			
			
			._btn_top{
				width: 60%;
				height: 165upx;
			}
			
			._lab_top{
				width: 60%;
				height: auto;
				margin-top: 20upx;
			}
			
			._ar{
				display:flex;
				width:50%;
				position:absolute;
				margin-top:70upx;
				justify-content:center;
			}
		}
		
		._content{
			width:80%;
			height:100%;
			font-size:9pt;
			border:4upx solid #4B81E8;
			border-radius:15upx;
			box-shadow:1upx 3upx 5upx 6upx #4B81E8;
			padding:10upx 25upx;
			margin:auto;
			margin-bottom: 25upx;
			
			
			label{
				width:100%;
				display:flex;
				justify-content:center;
				margin:18upx 0upx;
			}
			
			image{
				width:100%;
				height:695upx;
				margin:auto;
				display:flex;
			}
			
			rich-text{
				word-break:break-all;
				font-size: 11pt;
			}
			._lbtn{
				._outer{
					position: relative;
				}
			}
		}
	}
</style>
